<template>
<div id="goods-attr">
<form class="form-goods-attr">
    <my-input
        v-for='item in newAttrList' 
        :key='item.attr_id'
        :title="item.attr_name"
        :name="item.label"
        v-model="item.attr_vals"
    ></my-input>
</form>
</div>
</template>

<script>
import { getGoodsCateAttr } from '../../config/data'
export default {
    name: 'goodsAttr',
    props: ['goodsinfo'],
    data() {
        return {
            attrList: []
        }
    },
    created() {
        this.getGoodsCateAttrList()
    },
    methods: {
        async getGoodsCateAttrList() {
            let result = await getGoodsCateAttr({
                cid: this.goodsinfo.cateId, 
                sel: 'only'
            })
            this.attrList = result.data.list
        }
    },
    computed: {
        newAttrList() {
            let list = this.attrList.filter(item => item.attr_vals !== 'ffff')
            this.$emit('update:goodsinfo', { attrList: this.attrList })
            list = list.map(item => {
                item['label'] = 'abcdefghijklmnopqrstuvwxyz'.split('')
                                    .sort(_ => Math.random() - 0.5)
                                    .join('')
                return item;
            })
            return list;
        }
    },
}
</script>

<style scoped>
#goods-attr {
    height: 100%;
}
.form-goods-attr {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>